<template>
	<view>
		<view class="content">
			<text v-for="(item,index) in nav" :key="item.id" :class="{red:isred === index}" @click="jump(index,item.id)">{{item.name}}</text>
		</view>
		<view class="guodu">
			热门歌手
		</view>
	</view>
</template>

<script>
	export default {
		methods:{
			jump(index,id){
				this.isred = index
				this.$emit('jump',id)
			}
		},
		data() {
			return {
				isred:0,
				nav:[
					{
						name:'华语',
						id:7
					},
					{
						name:'欧美',
						id:96
					},
					{
						name:'日本',
						id:8
					},
					{
						name:'韩国',
						id:16
					},
					{
						name:'其他',
						id:0
					}
				]
			}
		}
	}
</script>

<style lang="scss">
	.content{
		width: 100%;
		height: 170rpx;
		//background-color: blue;
		display: flex;
		align-items: center;
		justify-content: space-around;
		text{
			font-size: 32rpx;
		}
		.red{
			color: $red;
		}
	}
	.guodu{
		width: 100%;
		height: 60rpx;
		background-color: #e6e6e6;
		font-size: 24rpx;
		display: flex;
		align-items: center;
		padding-left: 20rpx;
	}
</style>
